{% extends 'layout/base.html' %}
{% block title %}采集号管理 - 客一客爬虫后台管理系统模板{% endblock title %}
{% block content %}


    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar clearfix">
                        <form class="pull-right search-bar" method="get" action="#!" role="form">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <input type="hidden" name="search_field" id="search-field" value="title">
                                    <button class="btn btn-default dropdown-toggle" id="search-btn"
                                            data-toggle="dropdown" type="button" aria-haspopup="true"
                                            aria-expanded="false">
                                        标题 <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="javascript:void(0)" data-field="title">标题</a></li>
                                        <li><a tabindex="-1" href="javascript:void(0)" data-field="cat_name">栏目</a></li>
                                    </ul>
                                </div>
                                <input type="text" class="form-control" value="" name="keyword" placeholder="请输入名称">
                            </div>
                        </form>
                        <div class="toolbar-btn-action">
                            {#          <a class="btn btn-primary m-r-5" href="#!"><i class="mdi mdi-plus"></i> 新增</a>#}
                            {#            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">#}
                            {#</button>#}
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#exampleModal" data-whatever="@mdo"><i class="mdi mdi-plus"></i>新建
                            </button>
                            {% csrf_token %}
                            <a class="btn btn-success m-r-5" href="#!"><i class="mdi mdi-check"></i> 启用</a>
                            <a class="btn btn-warning m-r-5" href="#!"><i class="mdi mdi-block-helper"></i> 禁用</a>
                            <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                        </div>
                    </div>
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>
                                        <label class="lyear-checkbox checkbox-primary">
                                            <input type="checkbox" id="check-all"><span></span>
                                        </label>
                                    </th>
                                    <th>编号</th>
                                    <th>公众号id</th>
                                    <th>公众号密码(已加密)</th>
                                    <th>扫码用户姓名</th>
                                    <th>管理员微信号</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for index in wechat_list %}
                                    <tr id="{{ index.id }}">
                                        <td>
                                            <label class="lyear-checkbox checkbox-primary">
                                                <input type="checkbox" name="ids[]" value="9"><span></span>
                                            </label>
                                        </td>
                                        <td>{{ index.id }}</td>
                                        <td>{{ index.wechat_code }}</td>
                                        <td>{{ index.password }}</td>
                                        <td>{{ index.scaner }}</td>
                                        <td>{{ index.adminer_wechat_id }}</td>
                                        <td>{% if index.token != 'null' and index.token is not None and index.token != ''  %} <span style="color: #777777">已登陆</span> {% else %}
                                            <span style="color: red">未登陆</span> {% endif %}</td>
                                        <td id="tds">
                                            <div class="btn-group">
                                                <a class="btn btn-xs btn-default edit" href="#" title="编辑公众号" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                                <a class="btn btn-xs btn-default"
                                                   href="{% url 'spiders_account:singin' index.id %}" id="onClickLogin"
                                                   {% if index.token != 'null' and index.token is not None and index.token != '' %} disabled="" {% else %}{% endif %}
                                                   title="去登陆"
                                                   data-toggle="tooltip"><i
                                                        class="mdi mdi-window-maximize"></i></a>
                                                <a class="btn btn-xs btn-default deletes" id="deleteUser" href="#!" title="删除公众号" data-toggle="tooltip" role="button"><i class="mdi mdi-window-close"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}

                                </tbody>
                            </table>
                        </div>
                        <ul class="pagination">
                            <li class="disabled"><span>«</span></li>
                            <li class="active"><span>1</span></li>
                            <li><a href="#1">2</a></li>
                            <li><a href="#1">3</a></li>
                            <li><a href="#1">4</a></li>
                            <li><a href="#1">5</a></li>
                            <li><a href="#1">6</a></li>
                            <li><a href="#1">7</a></li>
                            <li><a href="#1">8</a></li>
                            <li class="disabled"><span>...</span></li>
                            <li><a href="#!">134</a></li>
                            <li><a href="#!">135</a></li>
                            <li><a href="#!">»</a></li>
                        </ul>

                    </div>
                </div>
            </div>

        </div>


        {#        模态框 新增账号#}
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="exampleModalLabel">新增微信号</h4>
                    </div>
                    <div class="modal-body">
                        <form method="post" id="regForm">
                            {% csrf_token %}
                            <div class="form-group">
                                <label for="recipient-name" class="control-label">抓取号id</label>
                                <input type="text" name="username" class="form-control" id="recipient-name"
                                       placeholder="输入抓取号id">
                                <span class="error-msg"></span>
                            </div>
                            <div class="form-group">
                                <label for="password" class="control-label">抓取号密码 </label>
                                <input type="text" name="pwd" class="form-control" id="password" placeholder="输入抓取号密码">
                                <span class="error-msg"></span>
                            </div>
                            <div class="form-group">
                                <label for="adminNickName" class="control-label">管理员昵称</label>
                                <input type="text" name="adminer" class="form-control" id="adminNickName"
                                       placeholder="输入抓取号管理员昵称">
                                <span class="error-msg"></span>
                            </div>
                            <div class="form-group">
                                <label for="adminWechatCode" class="control-label">管理员微信号</label>
                                <input type="text" name="adminer_wx" class="form-control" id="adminWechatCode"
                                       placeholder="输入抓取号管理员微信号">
                                <span class="error-msg"></span>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="onClickSubmit">提交</button>
                    </div>
                </div>
            </div>
        </div>

        {#    编辑账号#}

        <!-- Modal -->
        <div class="modal fade" id="myEditModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">编辑抓取号</h4>
                    </div>
                    <div class="modal-body">
                        <form id="editForm">
                            {% csrf_token %}
                            <input type="hidden" name="user_id" id="user_id" value="">
                            <div class="form-group">
                                <label for="id_username">抓取号账号名</label>
                                <input type="text" class="form-control" name="user_name" id="id_username" value="">
                            </div>
                            <div class="form-group">
                                <label for="id_password">抓取号密码 <span style="color: red">(*必填)</span></label>
                                <input type="password" class="form-control" name="pwd" id="id_password" placeholder="Password">
                            </div>
                            <div class="form-group">
                                <label for="id_nickname">抓取号管理员昵称</label>
                                <input type="text" class="form-control" name="nickname" id="id_nickname" placeholder="Email">
                            </div>
                            <div class="form-group">
                                <label for="id_wechat_code">抓取号管理员微信号</label>
                                <input type="text" class="form-control" name="wechat_wxcode" id="id_wechat_code" placeholder="Email">
                            </div>
                            <span id="errmsg" style="color: red"></span>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                        <button type="button" class="btn btn-primary" id="onClickEditSubmit">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>



{% endblock %}
{% block js %}
    <script>
        $(function () {
            onClickAdd();
            onClickEdit();
            // Lgonin();
            // 新增抓取号 模态框显示
            $('#myModal').on('shown.bs.modal', function () {
                $('#myInput').focus()
            });
            // 设置禁止登录状态
            // // 编辑抓取号模态框显示
            $('table').on('click', 'a.edit', function () {
                console.log($(this).parents("tr").children('td').eq(2).html());
                var userId = $(this).parents("tr").children('td').eq(1).html();
                var userName = $(this).parents("tr").children('td').eq(2).html();
                var pwd = $(this).parents("tr").children('td').eq(3).html();
                var adminNiceName = $(this).parents("tr").children('td').eq(4).html();
                var adminWeChatCode = $(this).parents("tr").children('td').eq(5).html();
                $("#user_id").val(userId);
                $("#id_username").val(userName);
                //$("#id_password").val(pwd);
                $("#id_nickname").val(adminNiceName);
                $("#id_wechat_code").val(adminWeChatCode);
                $('#myEditModel').modal()
            });
            // 删除抓取号功能
            $('table').on('click', 'a.deletes', function () {
                console.log($(this).parents("tr").attr('id'));
                // 获取公众号的id
                var index_id = $(this).parents("tr").attr('id');
                var CsrfToken = $("[name='csrfmiddlewaretoken']").val()
                // 前端删除
                var flag = window.confirm("确定删除吗");
                if (flag) {
                    $(this).parents("tr").remove(); // 前端删除数据
                    // 异步删除
                    $.ajax({
                        url: "{% url 'spiders_account:del_account' %}",
                        type: "POST",
                        data: {"csrfmiddlewaretoken": CsrfToken, "user_id": index_id},
                        success: function (res) {
                            if (res.status) {

                            } else {
                                console.log(res)
                            }
                        }
                    })
                }

            })
        });

        function onClickAdd() {
            // 添加用户注册登录
            $("#onClickSubmit").click(function () {
                // 清空
                $(".error-msg").empty();
                // 获取所有表单提交的参数
                var datas = $("#regForm").serialize();
                $.ajax({
                    url: "{% url 'spiders_account:add_account' %}",
                    data: datas,
                    type: "POST",
                    success: function (result) {
                        if (result.status) {
                            // alert("用户添加成功");
                            location.href = result.hrefs
                        } else {
                        }
                    }
                })
            })

        }

        // 修改抓取号信息
        function onClickEdit() {
            $("#onClickEditSubmit").click(function () {
                // 还是要获取用户的id啊
                $.ajax({
                    url:"{% url 'spiders_account:edit_account' %}",
                    data:$('#editForm').serialize(),
                    type:"POST",
                    success:function (res) {
                        if (res.status){
                            location.href = "{% url 'spiders_account:spiders_list' %}"
                        }else {
                            $("#errmsg").text(res.message)
                        }
                    }
                })
            })
        }



    </script>
{% endblock %}
